// @ts-ignore 
import * as calendar from './calendar';

export default class ClockModel {

  timerInterval: any;
  timer: string;
  timeSecond: boolean;
  canvas_id: string;
  canvas_width: number;
  canvas_height: number;
  canvas: HTMLCanvasElement;
  context: CanvasRenderingContext2D;
  focallength: number;

  constructor(id: string) {
    this.timer = '00:00:00';
    this.timeSecond = true;
    this.canvas_id = id;
    this.canvas_width = 0;
    this.canvas_height = 0;
    this.canvas = document.getElementById(this.canvas_id) as HTMLCanvasElement;
    this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
    this.focallength = 250;

    this.getScreenSize();
  }

  setCanvasSize(w: number, h: number) {
    console.log(w, h)
    this.canvas_width = w;
    this.canvas_height = h;
    this.canvas.width = w;
    this.canvas.height = h;
    this.interval();
  }

  getScreenSize() {
    this.setCanvasSize(document.documentElement.clientWidth, document.documentElement.clientHeight)

    window.onresize = () => {
        this.setCanvasSize(document.documentElement.clientWidth, document.documentElement.clientHeight)
    }
  }

  interval() {
    clearInterval(this.timerInterval);
    this.timerInterval = setInterval(() => {
      const month = new Date().getMonth() + 1;
      const day = new Date().getDate();
      const hours = String(new Date().getHours()).length === 1 ? '0' + new Date().getHours() : new Date().getHours();
      const minutes = String(new Date().getMinutes()).length === 1 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      // console.log(calendar.calendar.solar2lunar())
      const ncWeek = calendar.calendar.solar2lunar().ncWeek.replace('星期', '');
      const lMonth = calendar.calendar.solar2lunar().lMonth;
      const lDay = calendar.calendar.solar2lunar().lDay;
      const Term = calendar.calendar.solar2lunar().Term ? calendar.calendar.solar2lunar().Term : '';
      const lDate = Term ? lMonth + '.' + lDay + '' + Term : calendar.calendar.solar2lunar().IMonthCn + calendar.calendar.solar2lunar().IDayCn;
      const birthday = [525, 611, 91];
      let birthdayTips = '';
      for (let n in birthday) {
        // console.log(birthday[n])
        if (birthday[n] === parseInt(lMonth + '' + lDay)) {
          birthdayTips = '✿';
        }
      }
      console.log(ncWeek)
      if (this.timeSecond) {

        this.context.clearRect(0, 0, this.canvas_width, this.canvas_height);
        this.timeSecond = false;
        this.drawText(hours + ':' + minutes + birthdayTips, month + '.' + day + '✦' + ncWeek);
      } else {
        this.timeSecond = true;

        this.context.clearRect(0, 0, this.canvas_width, this.canvas_height);
        this.drawText(hours + ':' + minutes + birthdayTips, lDate);
      }
    }, 2000)

  }

  drawText(timer: string, date: string) {
    this.context.save()
    this.context.font = "bolder 120px SimHei";
    this.context.fillStyle = "rgba(255,255,255,1)";
    this.context.textAlign = "center";
    this.context.textBaseline = "middle";
    this.context.fillText(timer, this.canvas_width / 2 - 10, this.canvas_height / 4, this.canvas_width - 10);
    this.context.fillText(date, this.canvas_width / 2 - 10, this.canvas_height / 4 * 3, this.canvas_width - 10);
    this.context.restore();
  }
}